<template>
<!-- 资讯页面 -->
    <div class="fa">
        <div class="top container">
            <img src="../assets/img/logo.gif" alt="" />
            <div class="box">
                <div>
                <router-link to="/search" tag="input"
                    type="search"
                    class="inp1"
                    placeholder="输入菜名、食材、作者"
                    
                />
                <router-link to="/search" tag="input" type="submit" class="inp2 fa" value=""  />
                </div>
            </div>
        </div>
        <div class="infobox">
            <h1>美食资讯</h1>
            <div class="infolist" v-for="(item,index) in data" :key="index" @click="jop">
                <h2> {{item.top}}</h2>
                <div class="infoitem">
                    <img :src="item.img" alt="">
                    <p>{{item.p}} </p>
                </div>
                <p class="info-text">
                        <span class="time fa">{{item.s}}</span>
                        <a>{{item.a}}</a>
                        <a>{{item.a1}}</a>
                </p>
            </div>
        </div>
        <div class="bottom container">
        <ul>
            <li>
            <router-link tag="a" to="/home">
                <span id="bottom-home"></span>
                <p>首页</p>
            </router-link>
            </li>
            <li>
            <router-link tag="a" to="/init">
                <span id="bottom-top"></span>
                <p>排行</p>
            </router-link>
            </li>
            <li>
            <router-link tag="a" to="/classify">
                <span id="bottom-list"></span>
                <p>分类</p>
            </router-link>
            </li>
            <li  class="con">
                <router-link tag="a" to="/info"  >
                <span id="bottom-recipe"></span>
                <p>资讯</p>
                </router-link>
            </li>
            <li>
            <router-link tag="a" to="/my">
                <span id="bottom-user"></span>
                <p>我的</p>
            </router-link>
            </li>
        </ul>
        </div>
    </div>
</template>

<script>
import { getinfodata } from "../api/home.js";
    export default {
        data() {
            return {
                data: null,
            };
        },
        created(){
            getinfodata().then(data=>{
                this.data = data.data
            })
        },
        methods:{
            // 跳转资讯详情页面
            jop(){
                this.$router.push({path:"snack"})
            }
        }

    }
</script>

<style lang="scss" >
@import "../assets/css/init.css";
.infobox{
    padding: 16px;
    padding-bottom:52px ;
    background-color:#fff ;
    h1{
        width: 100%;
        height: 24px;
        margin-bottom:8px ;
        font-size: 20px;
        color: #212529;

    }
    .infolist{
        margin: 16px 0px;
        padding-bottom: 8px;
        border-bottom: 1px solid #eaedef;
        h2{
            width: 100%;
            height: 19px;
            line-height: 19px;
            margin-bottom:8px ;
            font-size: 16px;
            font-weight: 700;
        }
        .infoitem{
            width: 100%;
            margin-bottom:16px;
            img{
                width: 90px;
                height: 90px;
                margin-right:16px ;
            }
            p{
                display: inline-block;
                width: 237px;
                height: 93px;
                color: #999;
                font-size: 12px;
                vertical-align: top;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
        .info-text{
            .time{
                color: #999;
                font-size: 14px;
            }
            a{
                display: inline-block;
                font-size: 13px;
                margin-left:8px ;
                padding: 0 8px;
                border: 1px solid #bcbcbc;
                color: #212529;
                height: 20px;
            }
        }
    }
}
</style>